<template>
	<view :id="elId" class="v-tabs">
		<scroll-view id="scrollContainer" :scroll-x="scroll" :scroll-left="scroll ? scrollLeft : 0" :scroll-with-animation="scroll"
		 :style="{ position: fixed ? 'fixed' : 'relative', zIndex: zIndex }">
			<view class="v-tabs__container" :style="{
          display: scroll ? 'inline-flex' : 'flex',
          whiteSpace: scroll ? 'nowrap' : 'normal',
          background: bgColor,
          height,
          padding
        }">
				<view class="v-tabs__container-item" v-for="(v, i) in tabs" :key="i" :style="{
            color: current == i ? activeColor : color,
            justifyContent: !scroll ? 'center' : '',
            flex: scroll ? '' : 1,
            padding: paddingItem
          }"
				 @click="change(i)">
					<image :src="v.img"></image>
					<view class="">
						{{v.name}}
					</view>
				</view>
				<view v-if="!pills" :style="{
            
            width: lineWidth + 'px',
            height: lineHeight,
            borderRadius: lineRadius,
            left: lineLeft + 'px',
            transform: `translateX(-${lineWidth / 2}px)`
          }"></view>
			</view>
		</scroll-view>
		<view class="v-tabs__placeholder" :style="{
        height: fixed ? height : '0',
        padding
      }"></view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			tabs: {
			  type: Array,
			  default() {
			    return []
			  }
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			padding: {
				type: String,
				default: '0'
			},
			color: {
				type: String,
				default: '#666'
			},
			activeColor: {
				type: String,
				default: '#1DD3B8'
			},
			fontSize: {
				type: String,
				default: '20rpx'
			},
			activeFontSize: {
				type: String,
				default: '32rpx'
			},
			bold: {
				type: Boolean,
				default: true
			},
			scroll: {
				type: Boolean,
				default: true
			},
			height: {
				type: String,
				default: '98rpx'
			},
			lineColor: {
				type: String,
				default: '#2979ff'
			},
			lineHeight: {
				type: String,
				default: '10rpx'
			},
			lineScale: {
				type: Number,
				default: 0.5
			},
			lineRadius: {
				type: String,
				default: '10rpx'
			},
			pills: {
				type: Boolean,
				deafult: false
			},
			pillsColor: {
				type: String,
				default: '#2979ff'
			},
			pillsBorderRadius: {
				type: String,
				default: '10rpx'
			},
			field: {
				type: String,
				default: ''
			},
			fixed: {
				type: Boolean,
				default: false
			},
			paddingItem: {
				type: String,
				default: '0 43rpx'
			},
			zIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				elId: '',
				lineWidth: 30,
				currentWidth: 0, // 当前选项的宽度
				lineLeft: 0, // 滑块距离左侧的位置
				pillsLeft: 0, // 胶囊距离左侧的位置
				scrollLeft: 0, // 距离左边的位置
				containerWidth: 0, // 容器的宽度
				current: 0, // 当前选中项
			}
		},
		watch: {
			value(newVal) {
				this.current = newVal
				this.$nextTick(() => {
					this.getTabItemWidth()
				})
			},
			current(newVal) {
				this.$emit('input', newVal)
			},
			tabs(newVal) {
				this.$nextTick(() => {
					this.getTabItemWidth()
				})
			}
		},
		methods: {
			// 产生随机字符串
			randomString(len) {
				len = len || 32
				let $chars =
					'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				let maxPos = $chars.length
				let pwd = ''
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
				}
				return pwd
			},
			// 切换事件
			change(index) {
				if (this.current !== index) {
					this.current = index
					this.$emit('change', index)
				}
			},
			// 获取左移动位置
			getTabItemWidth() {
				let query = uni
					.createSelectorQuery()
					// #ifndef MP-ALIPAY
					.in(this)
				// #endif
				// 获取容器的宽度
				query
					.select(`#scrollContainer`)
					.boundingClientRect((data) => {
						if (!this.containerWidth && data) {
							this.containerWidth = data.width
						}
					})
					.exec()
				// 获取所有的 tab-item 的宽度
				query
					.selectAll('.v-tabs__container-item')
					.boundingClientRect((data) => {
						if (!data) {
							return
						}
						let lineLeft = 0
						let currentWidth = 0
						if (data) {
							for (let i = 0; i < data.length; i++) {
								if (i < this.current) {
									lineLeft += data[i].width
								} else if (i == this.current) {
									currentWidth = data[i].width
								} else {
									break
								}
							}
						}
						// 当前滑块的宽度
						this.currentWidth = currentWidth
						// 缩放后的滑块宽度
						this.lineWidth = currentWidth * this.lineScale * 1
						// 滑块作移动的位置
						this.lineLeft = lineLeft + currentWidth / 2
						// 胶囊距离左侧的位置
						this.pillsLeft = lineLeft
						// 计算滚动的距离左侧的位置
						if (this.scroll) {
							this.scrollLeft = this.lineLeft - this.containerWidth / 2
						}
					})
					.exec()
			}
		},
		mounted() {
			this.elId = 'xfjpeter_' + this.randomString()
			this.current = this.value
			this.$nextTick(() => {
				this.getTabItemWidth()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.v-tabs {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;

		::-webkit-scrollbar {
			display: none;
		}

		.v-tabs__container {
			// 不能设置宽度
			// width: 100%;
			// width: calc(100% - 72rpx);
			height: 98rpx;
			font-size: 20rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			.v-tabs__container-item {
				display: flex;
				flex-direction: column;
			}
		}

		&__container {
			// min-width: 100%;
			min-width: calc(100% - 72rpx);
			position: relative;
			display: inline-flex;
			align-items: center;
			white-space: nowrap;
			overflow: hidden;

			&-item {
				display: flex;
				align-items: center;
				// height: 100%;
				position: relative;
				z-index: 10;
				// padding: 0 11px;
				transition: all 0.3s;
				white-space: nowrap;
			}

			&-line {
				position: absolute;
				bottom: 0;
				transition: all 0.3s linear;
			}

			&-pills {
				position: absolute;
				transition: all 0.3s linear;
				z-index: 9;
			}
		}
	}
</style>
